<template>
  <div class="update-gender">
    <van-picker
      title="请选择性别"
      show-toolbar
      :columns="columns"
      :default-index="value"
      @confirm="onConfirm"
      @cancel="$emit('close')"
      @change="onChange"
    />
  </div>
</template>
<script>
import {updateUserProfileAPI} from '@/api';

export default {
  name:"UpdateGender",
  components:{},
  props:{
    value:{
      type:Number,
      required:true
    }
  },
  data(){
    return {
      columns: ['男', '女'],
      gender:this.value
    }
  },
  computed:{},
  watch:{},
  methods:{
    onChange(picker, value, index){
      this.gender=index
    },
    async onConfirm(){
      this.$toast.loading({
        message:'保存中...',
        forbidClick:true,
        duration:0
      })
      try{
        if(this.gender!=this.value){
          await updateUserProfileAPI({
            gender:this.gender
          })
          this.$emit('input',this.gender)
        } 
        this.$emit('close')
        this.$toast.success('更新成功')
      }catch(err){
        this.$toast.fail('更新失败')
      }
    },
    
  }
}
</script>
<style lang="less" scoped>
</style>